@import '../../vars';

.playlist_view_container {
  width: 100%;
  height: 100%;
  margin: 1rem 0rem;

  .playlist {
    display: flex;
    flex-flow: column;
  }

  .playlist_info {
    display: flex;
    flex-flow: row;

    img {
      width:  15rem;
      border-radius: 0.5rem;
      box-shadow: 0rem 0rem 1rem 0.5rem rgba($black, 0.4);
    }
  }

  .playlist_header {
    display: flex;
    width: 100%;
    flex-flow: column;
    margin: 0 2rem;
  }
  
  .playlist_name {
    margin: 0 1rem 1rem 0;
    font-size: 32px;
    line-height: 32px;
  }

  .playlist_buttons {
    display: flex;
    flex-flow: row;
    padding-bottom: 1rem;
    
    a {
      padding: 0.375rem 2.5rem;
    }
    
    .play_button {
      background: $pink;
      color: $white;
      border-radius: 1.5rem;
      text-transform: uppercase;
      margin-right: 2rem;
    }

    .more_button {
      border: 1px solid white;
      border-radius: 1.5rem;
    }
  }

  .playlist_tracks {
    margin: 1rem;
  }
  
  .playlist_track {
    display: flex;
    flex-flow: row;
    
    border-bottom: 1px solid rgba($lightbg, 0.4);

    &:first-child {
      border-top: 1px solid rgba($lightbg, 0.4);
    }
  }

  .track_thumbnail {
    width: 3rem;
    height: 3rem;
  }

  .track_info {
    display: flex;
    flex-flow: row;
    justify-content: space-around;
    align-items: center;
    margin: 0.75rem;
  }

  .track_artist {
    color: rgba($grey, 0.5);
    margin: 0 1rem;
  }
  
  .track_name {

  }
}
